<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ul事件委托方案</title>
    <link rel="stylesheet" href="">
    <style>
        ul{
            width: 400px;
            height: 200px;
            background: rgb(250, 129, 230);
            list-style: none;
        }
        li{
            width: 100%;
            height: 50px;
            margin: 20px 0;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <h2>移入显示tips</h2>
    <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
    </ul>
        <div class="tips1" style="position: absolute;left: 45px;top: 0px;display: none; height: 0px;width: 0px;border-top:0px solid transparent;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom: 10px solid rgba(135, 143, 140, 0.623);"></div>
        <div class="tips2" style="position: absolute;left: 0px;top: 10px;display: none;height: 40px;width: 100px;background-color: rgba(135, 143, 140, 0.623);text-align: center;border-radius: 10px;">lalla</div>
    <script>
        var ulObj=document.querySelector('ul')
        var tipsObjs=document.querySelector('.tips1')
        var tipsObj2=document.querySelector('.tips2')
        console.log(tipsObjs)
        ulObj.onmousemove=function(evt){
            var e=evt || window.event
            var target=e.target || e.srcElement
            // console.log(target.nodeName);
            if(target.nodeName== 'LI'){
                // console.log(tipsObj2)
                tipsObjs.style.display='block'
                tipsObjs.style.left=e.clientX+'px'
                tipsObjs.style.top=e.clientY+20+'px'
                tipsObj2.style.display='block'
                tipsObj2.style.left=e.clientX-tipsObj2.offsetWidth/2+5+'px'
                tipsObj2.style.top=e.clientY+30+'px'
                tipsObj2.innerText=target.innerText
            }
        }
        ulObj.onmouseout=function(evt){
            var e=evt || window.event
            tipsObjs.style.display='none';
            tipsObj2.style.display='none';
        }
    </script>
</body>
</html>
